
<template>
  <!-- 退款关闭// -->
  <div class="app-container">
    <h3 class="title">退款关闭订单</h3>
    <div v-if="setPermissionBtn('/goods/refund/order/query/page', searchBtn)" class="inputBox">
      <el-input v-model="search.refundOrderSn" class="input" placeholder="请输入退单编号查询" />
      <el-input v-model="search.goodsName" class="input" placeholder="请输入商品名称查询" />
      <el-input v-model="search.contactPerson" class="input" placeholder="请输入联系人查询" />
      <el-input v-model="search.contactPhone" class="input" placeholder="请输入联系人手机号查询" />
      <el-date-picker
        v-model="search.startTime"
        class="startDate"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="审核开始日期"/>
      <el-date-picker
        v-model="search.endTime"
        class="endDate"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="审核结束日期"/>
      <!-- <el-input v-model="search.refundOrderSn" class="input" placeholder="请输入退货快递单号查询" /> -->
      <el-button type="primary" class="ml10" @click="toSearch">{{ searchBtn.btnName }}</el-button>
      <el-button type="primary" @click="toReset">重置</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中请稍后"
      border
      fit
      highlight-current-row>
      <template slot="empty">
        <div class="noData">暂无数据</div>
      </template>
      <el-table-column label="退单编号" width="130">
        <template slot-scope="scope">
          {{ scope.row.refundOrderSn }}
        </template>
      </el-table-column>
      <el-table-column label="商品名称">
        <template slot-scope="scope">
          {{ scope.row.goodsName }}
        </template>
      </el-table-column>
      <el-table-column label="退款金额">
        <template slot-scope="scope">
          {{ scope.row.refundAmount }}
        </template>
      </el-table-column>
      <el-table-column label="退单类型" width="">
        <template slot-scope="scope">
          <span v-if="scope.row.refundType === 1">退款</span>
          <span v-else-if="scope.row.refundType === 2">退货退款</span>
          <!-- {{ scope.row.refundType }} -->
        </template>
      </el-table-column>
      <el-table-column label="联系人">
        <template slot-scope="scope">
          {{ scope.row.contactPerson }}
        </template>
      </el-table-column>
      <el-table-column label="联系人手机号" width="110">
        <template slot-scope="scope">
          {{ scope.row.contactPhone }}
        </template>
      </el-table-column>
      <el-table-column label="申请时间" width="100">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <!-- 退款关闭 -100
      待审核 0
      同意退(货)款 100
      拒绝退(货)款 200
      退货中 300
      退款中 400
      已退款 500 -->
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.refundOrderStatus === -100">退款关闭</span>
          <span v-else-if="scope.row.refundOrderStatus === 0">待审核</span>
          <span v-else-if="scope.row.refundOrderStatus === 100">同意退(货)款</span>
          <span v-else-if="scope.row.refundOrderStatus === 200">拒绝退(货)款</span>
          <span v-else-if="scope.row.refundOrderStatus === 300">退货中</span>
          <span v-else-if="scope.row.refundOrderStatus === 400">退款中</span>
          <span v-else-if="scope.row.refundOrderStatus === 500">已退款</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="300">
        <template slot-scope="scope">
          <el-button
            v-if="setPermissionBtn('/goodsOrder/query', scope.row)"
            size="mini"
            value="订单详情"
            type="warning"
            @click="see(scope.$index)">{{ scope.row.btnName }}</el-button>
          <el-button
            v-if="setPermissionBtn('/goodsOrder/query', scope.row)"
            v-show="scope.row.refundOrderStatus === 0"
            size="mini"
            value="退款申请处理"
            type="primary"
            @click="refundApply(scope.$index)">退款申请处理</el-button>
          <el-button
            v-if="setPermissionBtn('/goods/refund/order/query', scope.row)"
            v-show="scope.row.refundOrderStatus === 100 || scope.row.refundOrderStatus === 200 || scope.row.refundOrderStatus === 500"
            size="mini"
            value="退单详情"
            type="warning"
            @click="refundOrderDetail(scope.$index, 1)">{{ scope.row.btnName }}</el-button>
          <el-button
            v-if="setPermissionBtn('/goods/refund/order/mandatoryRefund', scope.row)"
            v-show="scope.row.refundOrderStatus === 200"
            size="mini"
            value="完成退款"
            type="primary"
            @click="finishRefund(scope.row.id, scope.$index)">{{ scope.row.btnName }}</el-button>
          <el-button
            v-if="setPermissionBtn('/goods/refund/order/confirm/receipt', scope.row)"
            v-show="scope.row.refundOrderStatus === 300"
            size="mini"
            value="确认收货"
            type="primary"
            @click="confirmReceipt(scope.$index)">{{ scope.row.btnName }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
    <detail :detialvisible.sync="dialogTableVisible" :dialogdata.sync="list" :myindex.sync="detailIndex" :detail-mode="'storeOrder'" />

    <!-- <confirmOrder
      :detialvisible.sync="confirmRefundVisible"
      :dialogdata.sync="list"
      :myindex.sync="confirmRefundIndex"
      :detail-mode="'confirmRefund'"
      @confirmOrder="confirmOrderFn"/>

    <confirmOrder
      :detialvisible.sync="finishRefundVisible"
      :dialogdata.sync="list"
      :myindex.sync="finishRefundIndex"
      :detail-mode="'finishRefund'"
      @confirmOrder="confirmOrderFn"/> -->

    <!-- 确认收货 -->
    <!-- <confirmOrder
      :detialvisible.sync="confirmReceiptVisible"
      :dialogdata.sync="list"
      :myindex.sync="confirmReceiptIndex"
      :detail-mode="'confirmReceipt'"
      @confirmReceipt="confirmReceiptFn"/> -->
    <confirmOrder
      :detialvisible.sync="refundOrderDetailVisible"
      :dialogdata.sync="list"
      :myindex.sync="refundOrderDetailIndex"
      :is-refund="isRefund"
      :detail-mode="'refundOrderDetail'"/>

    <confirmOrder
      :detialvisible.sync="refundDetailVisible"
      :dialogdata.sync="list"
      :myindex.sync="refundDetailIndex"
      :detail-mode="'refundDetail'"/>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import detail from '@/components/detail'
import Dialog from '@/components/Dialog'
import remark from '@/components/remark'
import remarkPropt from '@/components/remark/remarkPrompt'
import logistics from '@/components/logistics'
import sendGoods from '@/components/sendGoods'
import confirmOrder from '@/components/refund/confirmOrder'

import { Message } from 'element-ui'
import { getLocalUid, setLocalUid, getLocalId, setLocalId } from '@/utils/uid'
import { getPermission } from '@/api/permission'
import { getLocalUserName, setLocalUserName } from '@/utils/uid'
import { storeRemarkList } from '@/api/store'
import { getRefundOrderList, agreeRefund, refuseRefundOrder, mandatoryRefund } from '@/api/storeOrder'

export default {
  components: { Pagination, Dialog, detail, remarkPropt, remark, logistics, sendGoods, confirmOrder },
  filters: {
  },
  data() {
    return {
      searchBtn: {},
      // visible: false,
      userName: '',
      userType: -1,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 0,
        pageSize: 10,
        refundOrderStatus: -100 // 退款关闭
      },
      search: {
        refundOrderSn: '',
        goodsName: '',
        contactPerson: '',
        contactPhone: '',
        startTime: '',
        endTime: '',
        refundOrderStatus: -100 // 退款关闭
      },
      permissionShow: false, // 权限数据未到达之前按钮隐藏
      // permissionList: [] // 权限数据列表

      dialogTableVisible: false, // 详情弹窗
      detailIndex: -1,

      //   confirmReceiptVisible: false, // 确认收获
      //   confirmReceiptIndex: -1,

      finishRefundVisible: false, // 完成退款
      finishRefundIndex: -1,

      refundOrderDetailVisible: false,
      refundOrderDetailIndex: -1,
      isRefund: 0,

      refundDetailVisible: false, // 详情
      refundDetailIndex: -1
    }
  },
  computed: {
    // 权限按钮 computed
    setPermissionBtn() {
      return function(str, row) {
        let index = -1
        const buttonList = this.$store.getters.button
        index = buttonList.findIndex(item => item.value === str)
        // console.log(index)
        if (index !== -1) {
          row.btnName = buttonList[index].name
          return true
        } else {
          return false
        }
      }
    }
  },
  watch: {
    'permissionList'(newVal) {
      this.permissionList = newVal
      this.permissionShow = true
    }
  },
  created() {

  },
  mounted() {
    this.fetchData()
    this.getPermissonFn() // 获取按钮权限 vuex的button
  },
  methods: {
    refundOrderDetail(index, isRefund) {
      this.refundOrderDetailVisible = true
      this.refundOrderDetailIndex = index
      this.isRefund = isRefund
    },
    // 完成退款
    finishRefund(id, index) {
      console.log(id)
      this.$confirm('确定退款后，退款按支付路径原路返还', '您是否进行此操作？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        mandatoryRefund({ id }).then(res => {
          if (res.code === '200') {
            this.fetchData()
            Message.success('操作成功')
          } else {
            Message.error(res.message)
          }
          console.log(res)
        })
      })
    //   this.finishRefundVisible = true
    //   this.finishRefundIndex = index
    },

    // 订单详情
    see(index) {
      this.refundDetailVisible = true
      this.refundDetailIndex = index
    },
    // 查询
    toSearch() {
      if (this.search.startTime && this.search.endTime) {
        const start = new Date(this.search.startTime).getTime();
        const end = new Date(this.search.endTime).getTime();
        if (start > end) {
          Message.error('结束时间必须大于开始时间')
          return false
        }
      }
      if (this.search.startTime && this.search.startTime.indexOf(' 00:00:00') === -1) this.search.startTime += ' 00:00:00'
      if (this.search.endTime && this.search.endTime.indexOf(' 23:59:59') === -1) this.search.endTime += ' 23:59:59'
      this.listLoading = true
      console.log(this.search)
      const newData = this.objectCon(this.listQuery, this.search)
      getRefundOrderList(newData).then(response => {
        if (response.code === '200') {
          this.list = response.data.list
          this.total = response.data.total
        } else {
          Message.error(response.message + '-' + response.data)
        }
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    // 重置
    toReset() {
      this.search.refundOrderSn = ''
      this.search.goodsName = ''
      this.search.contactPerson = ''
      this.search.contactPhone = ''
      this.search.startTime = ''
      this.search.endTime = ''
    },
    /*
      <span v-if="scope.row.refundOrderStatus === -100">退款关闭</span>
        <span v-else-if="scope.row.refundOrderStatus === 0">待审核</span>
        <span v-else-if="scope.row.refundOrderStatus === 100">同意退(货)款</span>
        <span v-else-if="scope.row.refundOrderStatus === 200">拒绝退(货)款</span>
        <span v-else-if="scope.row.refundOrderStatus === 300">退货中</span>
        <span v-else-if="scope.row.refundOrderStatus === 400">退款中</span>
        <span v-else-if="scope.row.refundOrderStatus === 500">已退款</span>
      */
    fetchData() {
      this.listLoading = true
      const arr = [0, 100, 200, 300, 400, 500, -100]
      getRefundOrderList(this.listQuery).then(response => {
        if (response.code === '200') {
          this.list = response.data.list
          //   for (let i = 0; i < 7; i++) {
          //     let json = {}
          //     json = Object.assign({}, response.data.list[0])
          //     json.refundOrderStatus = arr[i]
          //     this.list.push(json)
          //   }
          console.log('订单数据：', this.list)
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 0.5 * 1000)
        } else {
          this.listLoading = false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .inputBox{
    div{ margin-bottom: 10px;}
    .input:nth-of-type(1){ width: 200px }
    .input:nth-of-type(2){ width: 160px }
    .input:nth-of-type(3){ width: 160px }
    .input:nth-of-type(4){ width: 180px }
    .startDate, .endDate{ width: 180px }
    .input:nth-of-type(7){width:140px}
  }
</style>
